<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			/* 初始样式 */
			.nav{
				width: 80%;
				margin: 0 auto;
			}
			/* 隐藏按钮 */
			.btn{
				display: none;
			}
			/* 子菜单 */
			.sub-nav{
				/* 弹性盒子 */
				display: flex;
			}
			.sub-nav > div{
				/* 自动缩放 */
				flex: 1;
				border: 1px red solid;
				text-align: center;
			}
			/* 设置每个菜单项的样式 */
			
			/* 文字换行 */
			.sub-nav span{
				display: block;
				margin: 20% 0;
			}
			.sub-nav img{
				margin-top: 10%;
			}
			
			/* 当屏幕宽度小于800px时 */
			@media screen and (max-width:799px) {
				/* 子菜单 */
				.sub-nav{
					flex-wrap: wrap;
				}
				.sub-nav > div {
					/* 初始宽度 */
					flex-basis: 45%;
					/* 内容居左 */
					text-align: left;
				}
				.sub-nav img {
					margin: 5% 10%;
					/* 图片垂直居中 */
					vertical-align: middle;
				}
				/* 文字不换行 */
				.sub-nav span{
					display: inline-block;
					margin: 0;
				}
				
			}
			
			/* 当屏幕宽度小于520px的时候 */
			@media screen and (max-width:519px) {
				/* 显示按钮 */
				.btn{
					display: block;
				}
				/* 隐藏子菜单 */
				.sub-nav{
					display: none;
				}
				
				.nav:hover .sub-nav{
					display: flex;
				}
				/* 调整初始宽度 */
				.sub-nav > div{
					flex-basis: 90%;
				}
				.sub-nav img {
					margin: 2% 10%;
					/* 图片垂直居中 */
					vertical-align: middle;
				}
				
			}
			
		</style>
	</head>
	<body>
		<div class="nav" id="nav">
			<img class="btn"  src="./img/1.png" alt="">
			<div class="sub-nav" id="sub-nav">
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
			</div>
		</div>
	</body>
	<script>
		// // 实现点击按钮，菜单显示
		// var nav = document.getElementById("nav");
		// 	// 当按钮被点击的是，修改子菜单的display
		// nav.onclick=function(even){
		// 	document.getElementById("sub-nav").style.display='flex';		
		// 	// 阻止事件冒泡
		// 	event.stopPropagation();
		// 	// 取消默认事件
		// 	event.preventDefault()
		// }
		
		// // 隐藏子菜单--- 当点击body（点击按钮外的其他地方）
		// window.onclick = function(){
		// 	document.getElementById("sub-nav").style.display='none';
		// }
		
	</script>
</html>